<template>
    <div class="app">
        <div class="header">
            
            <el-button type="danger" :icon="Delete" size="large" @click="handleMoreDel" :disabled="state.deleteMore == 0">批量删除</el-button>
            <el-button type="primary" :icon="Plus" size="large" @click="handleAddUser">添加类型</el-button>
            <el-input v-model="input" placeholder="请输入你想搜索的内容" size="large" style="width: 300px; margin-left: 12px" />
        </div>

        <div>
            <el-table :data="data" style="width: 100%" class="tables" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"  />
                <el-table-column prop="id" label="ID" /> 
                <el-table-column label="题型">
                    <template #default="scope">
                        <span v-show="scope.row.checked == false">{{scope.row.typename}}</span>
                        <input type="text" v-model="scope.row.typename" v-show="scope.row.checked == true" />
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <div v-show="scope.row.checked == false">
                            <el-button size="small" @click="handleEdit(scope.row.id)">修改</el-button>
                            <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
                        </div>
                        <div v-show="scope.row.checked == true">
                            <el-button size="small" @click="handleEdits(scope.row)">完成</el-button>      
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import Service from "./api/index"
import { ElMessage, ElMessageBox  } from 'element-plus'


    const state = reactive({
        tableData: [],

        deleteMore: [],
    })

    const input = ref("")

    const edits = ref(true)

    onMounted(() => {
        getQuest()
    })

    // 获取全部数据
    const getQuest = async() => {
        let res = await Service.getQuestionType()
        console.log(res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: "获取成功",
            })
            state.tableData = res.data
        }
    }

    // 删除题型
    const handleDelete = (i) => {
        ElMessageBox.confirm(
            '确定要删除此题型嘛?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
        .then(async() => {
            let res = await Service.deleteQuestType(i)
            console.log(res)
            if(res.code === 200){
                ElMessage({ 
                    type: 'success',
                    message: "删除成功",
                })
                getQuest()
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        }) 
    }

    // 修改数据
    const handleEdit = (i) => {
        let aa = state.tableData.findIndex((item) => item.id == i)
        state.tableData[aa].checked = true
    }

    const handleEdits = async(d) => {
        let aa = state.tableData.findIndex((item) => item.id == d.id)
        state.tableData[aa].checked = false
        let res = await Service.putQuestType(d)
        console.log(res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: "修改成功",
            })
        }
    }

    // 模糊查询
    const data = computed(() => {
        let ss = []
        ss = state.tableData
        if(input.value !== ""){
            ss = state.tableData.filter((item) => {
                console.log(item.typename)
                return item.typename.indexOf(input.value) > -1
            })
        }
        return ss
    })

    // 批量删除按钮
    const handleSelectionChange = (val) => {
        state.deleteMore = val
    }

</script>

<style scoped>
.header{
    display: flex;
    margin: 15px 0 20px 30px;
}
.tables{ 
    margin: 0 30px;
}
</style>
